<template>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="商品" prop="goodsId">
            <el-select v-model="form.goodsId" placeholder="请选择商品">
                <el-option v-for="item in goodsOptions" :key="item.id" :label="item.goodsName" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="记录类型" prop="recordType">
            <el-select v-model="form.recordType" placeholder="请选择记录类型">
                <el-option v-for="dict in dict.type.stock_record_type" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
            </el-select>
        </el-form-item>
        <el-form-item label="记录子类型" prop="recordSubtype">
            <el-select v-model="form.recordSubtype" placeholder="请选择记录子类型">
                <el-option v-for="dict in dict.type.stock_record_subtype" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
            </el-select>
        </el-form-item>
        <el-form-item label="记录日期" prop="recordDate">
            <el-date-picker v-model="form.recordDate" type="datetime" placeholder="选择记录日期"
                value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item label="数量" prop="quantity">
            <el-input-number v-model="form.quantity" :min="0" :precision="2" />
        </el-form-item>
        <el-form-item label="单价" prop="unitPrice">
            <el-input-number v-model="form.unitPrice" :min="0" :precision="2" />
        </el-form-item>
        <el-form-item label="供应商" prop="supplierId">
            <el-select v-model="form.supplierId" placeholder="请选择供应商">
                <el-option v-for="item in supplierOptions" :key="item.id" :label="item.supplierName" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="客户" prop="customerId">
            <el-select v-model="form.customerId" placeholder="请选择客户">
                <el-option v-for="item in customerOptions" :key="item.id" :label="item.customerName" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="仓库" prop="warehouseId">
            <el-select v-model="form.warehouseId" placeholder="请选择仓库">
                <el-option v-for="item in warehouseOptions" :key="item.id" :label="item.warehouseName"
                    :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="目标仓库" prop="targetWarehouseId">
            <el-select v-model="form.targetWarehouseId" placeholder="请选择目标仓库">
                <el-option v-for="item in warehouseOptions" :key="item.id" :label="item.warehouseName"
                    :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="批次号" prop="batchNumber">
            <el-input v-model="form.batchNumber" placeholder="请输入批次号" />
        </el-form-item>
        <el-form-item label="有效期" prop="expiryDate">
            <el-date-picker v-model="form.expiryDate" type="date" placeholder="选择有效期" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="备注" prop="recordRemark">
            <el-input v-model="form.recordRemark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
    </el-form>
</template>

<script>
import { listGoods } from "@/api/system/goods";
import { listSupplier } from "@/api/system/supplier";
import { listCustomer } from "@/api/system/customer";
import { listWarehouse } from "@/api/system/warehouse";

export default {
    name: "RecordForm",
    dicts: ['stock_record_type', 'stock_record_subtype'],
    props: {
        form: {
            type: Object,
            default: () => {
                return {
                    id: null,
                    recordCode: null,
                    goodsId: null,
                    recordType: null,
                    recordSubtype: null,
                    recordDate: null,
                    quantity: null,
                    beforeQuantity: null,
                    afterQuantity: null,
                    unitPrice: null,
                    totalAmount: null,
                    supplierId: null,
                    customerId: null,
                    warehouseId: null,
                    targetWarehouseId: null,
                    operatorId: null,
                    operatorName: null,
                    approverId: null,
                    approverName: null,
                    approvalTime: null,
                    approvalStatus: "0",
                    recordStatus: "0",
                    batchNumber: null,
                    expiryDate: null,
                    recordRemark: null
                };
            }
        }
    },
    data() {
        return {
            // 商品选项
            goodsOptions: [],
            // 供应商选项
            supplierOptions: [],
            // 客户选项
            customerOptions: [],
            // 仓库选项
            warehouseOptions: [],
            // 表单校验
            rules: {
                goodsId: [
                    { required: true, message: "商品不能为空", trigger: "change" }
                ],
                recordType: [
                    { required: true, message: "记录类型不能为空", trigger: "change" }
                ],
                recordSubtype: [
                    { required: true, message: "记录子类型不能为空", trigger: "change" }
                ],
                recordDate: [
                    { required: true, message: "记录日期不能为空", trigger: "blur" }
                ],
                quantity: [
                    { required: true, message: "数量不能为空", trigger: "blur" }
                ],
                unitPrice: [
                    { required: true, message: "单价不能为空", trigger: "blur" }
                ],
                warehouseId: [
                    { required: true, message: "仓库不能为空", trigger: "change" }
                ]
            }
        };
    },
    created() {
        this.getGoodsOptions();
        this.getSupplierOptions();
        this.getCustomerOptions();
        this.getWarehouseOptions();
    },
    methods: {
        /** 查询商品选项 */
        getGoodsOptions() {
            listGoods().then(response => {
                this.goodsOptions = response.rows;
            });
        },
        /** 查询供应商选项 */
        getSupplierOptions() {
            listSupplier().then(response => {
                this.supplierOptions = response.rows;
            });
        },
        /** 查询客户选项 */
        getCustomerOptions() {
            listCustomer().then(response => {
                this.customerOptions = response.rows;
            });
        },
        /** 查询仓库选项 */
        getWarehouseOptions() {
            listWarehouse().then(response => {
                this.warehouseOptions = response.rows;
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.record-form {
    .record-form-item {
        margin-bottom: 20px;

        .record-form-label {
            font-weight: bold;
            color: #606266;
        }

        .record-form-input {
            width: 100%;
        }
    }
}
</style>